<template>
  <div class="lix-cla">
    <Abnor v-if="showAbnor" type="DATA" />
    <div class="lix-cla__list" v-if="!showAbnor">
      <div class="lix-cla__item" v-for="(item, idx) in list" :key="idx" :data-id="item.id" @click="go2CoursePage">
        <div class="img">
          <image :src="item.thumb" class="bgimg" />
          <image src="../../static/image/finished.png" class="finish" v-if="item.finished"/>
        </div>
        <div class="info">
          <p class="title zan-ellipsis">{{ item.name }}</p>
          <p class="author">主讲老师：{{ item.teacher }}</p>
          <p class="author">开课时间：{{ item.begintime }}</p>
          <p class="price"><span>￥</span>{{ item.price }}</p>
        </div>
      </div>
    </div>
    <ZanLoadmore :loading="loading" :nomore="! hasNextPage" v-if="!noData"/>
  </div>
</template>

<script>
import { HISTORY_GET_LIST } from '../../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
import ZanLoadmore from '../../../node_modules/mpvue-zanui/src/components/zan/loadmore';
import Abnor from '@/components/abnor/abnor';

export default {
  components: {
    ZanLoadmore,
    Abnor
  },
  computed: {
    ...mapGetters('history', {
      list: 'list',
      loading: 'loading',
      hasNextPage: 'hasNextPage',
      noData: 'noData',
      currentPage: 'currentPage'
    })
  },
  data() {
    return {
    };
  },
  onLoad() {
    this.getListData({
      page: 1,
      params: {}
    }).then(a => {
      console.log('------->', this.list);
      console.log(this.$store);
    });
  },
  onUnload() {
    console.log('页面卸载');
    this.destroyedState();
  },
  onReachBottom() {
    if (this.hasNextPage) {
      this.getListData(this.currentPage + 1);
    }
  },
  methods: {
    ...mapActions('history', {
      'getListData': HISTORY_GET_LIST,
      'destroyedState': 'destroyedState'
    }),
    itemClick(e) {
      console.log(e);
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/index/school?id=' + id
      });
    },
    go2CoursePage(e) {
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/index/courseDetail?classid=' + id
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/myclass.scss";
</style>
